<template>
  <!-- 分页组件 -->
  <el-pagination
    v-model:current-page="pagination.page"
    v-model:page-size="pagination.size"
    :page-sizes="[10, 20, 30, 50]"
    :total="pagination.total"
    @size-change="$emit('size-change', $event)"
    @current-change="$emit('page-change', $event)"
    background
    layout="total, sizes, prev, pager, next, jumper"
  />
</template>

<script setup>
  // 定义组件属性
  const props = defineProps({
    // 分页配置对象
    pagination: {
      type: Object,
      required: true,
    },
  });

  // 定义组件事件
  const emit = defineEmits(['size-change', 'page-change']);
</script>

<style lang="scss" scoped>
  // 分页容器样式
  .el-pagination {
    margin-top: 15px;
    justify-content: flex-end;
  }
</style>
